<style lang="less">
    @import "./login.less";
</style>
<template>
    <div
        class="login"
        @keydown.enter="handle"
    >
        <div class="login-con">
            <Card :bordered="false">
                <p slot="title">
                    <Icon type="log-in"></Icon> 欢迎登录
                </p>
                <div class="form-con">
                    <Form
                        ref="loginForm"
                        :model="form"
                        :rules="rules"
                    >
                        <FormItem prop="username">
                            <Input
                                v-model="form.username"
                                :disabled="btnDisable"
                                placeholder="请输入用户名"
                            >
                            <span slot="prepend">
                                <Icon
                                    :size="16"
                                    type="md-person"
                                ></Icon>
                            </span>
                            </Input>
                        </FormItem>
                        <FormItem prop="password">
                            <Input
                                type="password"
                                v-model="form.password"
                                :disabled="btnDisable"
                                placeholder="请输入密码"
                            >
                            <span slot="prepend">
                                <Icon
                                    :size="14"
                                    type="md-compass"
                                ></Icon>
                            </span>
                            </Input>
                        </FormItem prop="captcha">
                        <Row>
                            <Col span="12">
                            <Input
                                v-model="form.captcha"
                                placeholder="验证码"
                            >
                            <span slot="prepend">
                                <Icon
                                    :size="14"
                                    type="md-compass"
                                ></Icon>
                            </span></Input>
                            </Col>
                            <Col
                                span="10"
                                offset="2"
                            >
                            <img
                                :src="logimg"
                                style='vertical-align: middle;width:95%;height:95%'
                                @click="chanloimg"
                            />
                            </Col>
                        </Row>
                        <FormItem style='margin-top:10px'>
                            <Button
                                @click="handle"
                                type="warning"
                                long
                            >登录</Button>
                        </FormItem>
                        <p
                            style='color:red;text-align:center'
                            v-if="messshow"
                        >{{errormessage}}</p>
                    </Form>
                </div>
            </Card>
        </div>
    </div>
</template>
<script>
import Cookies from "js-cookie"
import md5 from 'js-md5'

import { setStore } from "@/config/storage"

export default {
    data() {
        return {
            btnDisable: false,
            count: 0,
            form: {
                username: null,
                password: null,
                key: null,
                type: 1,
                captcha: null
            },
            messshow: false,
            errormessage: null,
            logimg: null,
            rules: {
                username: [{ required: true, message: "不能为空", trigger: "blur" }],
                captcha: [{ required: true, message: "不能为空", trigger: "blur" }],
                password: [{ required: true, message: "不能为空", trigger: "blur" }]
            },
            permissions: {}
        }
    },
    methods: {
        handle() {
            this.form.password = this.form.password ? md5(this.form.password) : null
            this.$ajax.post('login/index', this.form)
                .then(res => {
                    if (!res.error_code) {
                        setStore("leftSidebarList", res.data.permissions)
                        setStore("token", res.data.token)
                        setStore("nick_name", res.data.admin.nick_name)
                        this.$store.commit('login', res.data)
                        this.$router.push({ name: "home_index" })

                    } else this.$Message.error(res.message)
                })
                .catch(err => { console.log(err) })

        },
        chanloimg() {
            this.$ajax.post('login/captcha')
                .then(res => {
                    if (!res.error_code) {
                        this.logimg = res.data.img
                        this.form.key = res.data.key
                    }
                })
        },
    },
    beforeRouteLeave(to, from, next) {
        window.location.reload()
        next()
    },
    created() {
        this.chanloimg()
    }
};
</script>